<html>
<head>
    <link rel="stylesheet" href="../../../../node_modules/font-awesome/css/font-awesome.min.css">

    <style>

        .doc-button:hover {
            /*color: black;*/
            cursor: hand;
        }

        .doc-button-active {
            color: grey;
        }

        /*.doc-button-inactive {*/
            /*color: lightgrey;*/
        /*}*/

        .doc-buttons {
            /*visibility: hidden;*/
            /*display: none;*/
            /*color: lightgrey;*/
            /*background-color: lightgrey;*/

            color: transparent;;
            background-color: transparent;
        }

        .doc-buttons:hover {
            /*visibility: visible;*/
            /*!*display: block;*!*/
            /*background-color: blue;*/
            /*color: lightgrey;*/

            color: grey;
            /*background-color: grey;*/
        }

        .divhover {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .divhover:hover {
            background-color: blue;

        }


        .header-filter-boxes {
            display: table;
        }

        .header-filter-box {
            display: table-cell;
            vertical-align: middle;
        }

        .header-filter-box label {
            user-select: none;
        }

    </style>

</head>

<body>
<p>
<div class="header-filter-boxes"><div class="header-filter-box"><input id="filter_flagged" type="checkbox"><label for="filter_flagged">flagged</label></div><div class="header-filter-box"><input id="filter_archived" type="checkbox"><label for="filter_archived">archived</label></div><div class="header-filter-box"><input id="filter" type="text" placeholder="Filter by title"></div></div>

    <h2>Active</h2>

    <div class="doc-buttons">
        <i class="fa fa-check doc-button doc-button-active"></i>
        <i class="fa fa-flag doc-button doc-button-active"></i>
    </div>


    <h2>Inactive</h2>

    <div class="doc-buttons">
        <i class="fa fa-check doc-button doc-button-inactive"></i>
        <i class="fa fa-flag doc-button doc-button-inactive"></i>
    </div>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>


    <div class="divhover">

    </div>

</p>


<!--<li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>-->
<!--<li><i class="icon-li icon-ok"></i>Buttons</li>-->
<!--<li><i class="icon-li icon-ok"></i>Button groups</li>-->
<!--<li><i class="icon-li icon-ok"></i>Navigation</li>-->
<!--<li><i class="icon-li icon-ok"></i>Prepended form inputs</li>-->
<!--<li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>-->
</body>
</html>


